goog.provide('czk.ui.panel.Panel');

goog.require('goog.dom');
goog.require('goog.dom.TagName');
goog.require('goog.ui.CustomButton');

goog.require('czk.ui.ZKComponent');

/**
 * @constructor
 * @extends {czk.ui.ZKComponent}
 */
czk.ui.panel.Panel = function() {
  goog.base(this);
};
goog.inherits(czk.ui.panel.Panel, czk.ui.ZKComponent);

czk.ui.panel.Panel.prototype.toggleEl = null;
czk.ui.panel.Panel.prototype.toggleBtn = null;
czk.ui.panel.Panel.prototype.toggleContent = null;

czk.ui.panel.Panel.prototype.createDom = function() {
  var dh = this.getDomHelper();
  var el = dh.createDom(goog.dom.TagName.DIV);
  this.setElementInternal(el);
  this.toggleEl = dh.createDom(goog.dom.TagName.SPAN, {
    className: 'toggle toggleon'
  });
  goog.dom.appendChild(el, this.toggleEl);
  this.toggleBtn = dh.createDom(goog.dom.TagName.A, {
    className: 'toggleText'
  });
  goog.dom.appendChild(this.toggleEl, this.toggleBtn);
  this.toggleContent = dh.createDom(goog.dom.TagName.DIV);
  goog.dom.appendChild(el, this.toggleContent);
};

/** @inheritDoc */
czk.ui.panel.Panel.prototype.enterDocument =
    function() {
      goog.base(this, 'enterDocument');
      this.getHandler().listen(this.toggleBtn, goog.events.EventType.CLICK,
          this.toggle, false, this);

      this.toggle();
    };

czk.ui.panel.Panel.prototype.toggle = function() {
  if (this.toggleState) {
    goog.dom.setProperties(this.toggleEl, {
      'class': 'toggle toggleoff'
    });
    goog.dom.setProperties(this.toggleContent, {
      'style': 'display:none'
    });
  } else {
    goog.dom.setProperties(this.toggleEl, {
      'class': 'toggle toggleon'
    });
    goog.dom.setProperties(this.toggleContent, {
      'style': ''
    });
  }
  this.toggleState = !this.toggleState;
};

czk.ui.panel.Panel.prototype.getContentElement = function() {
  return this.toggleContent;
};

czk.ui.panel.Panel.create = function() {
  return new czk.ui.panel.Panel();
};
